@import "../commons/variables.scss";
@import "../commons/px2rem.scss";

.juheh5-retrieve-password {
    .account-header {
        border-top-left-radius: px2rem(8);
        border-top-right-radius: px2rem(8);
        height: px2rem(64);
        line-height: px2rem(64);
        text-align: center;
        font-size: px2rem(32);
        color: #d8d8db;
        font-weight: 400;
        padding-top: px2rem(20);

        .back-icon {
            position: absolute;
            top: px2rem(20);
            left: px2rem(30);
            color: #fff;
            cursor: pointer;

            .bi-chevron-left {
                width: px2rem(25);
                height: px2rem(25);
            }
        }
    }

    .account-content {
        width: 85%;
        height: auto;
        margin: px2rem(35) auto;
    }

    .custom-input {
        width: 100%;
        background-color: #161720;
        margin: px2rem(10) 0;
        border-radius: px2rem(4);
        box-sizing: border-box;
        height: px2rem(65);
        line-height: px2rem(65);
        text-align: left;
        padding: px2rem(8) px2rem(25);
        color: #d8d8db;
        font-size: px2rem(22);
        outline: none;
        border: none;
        caret-color: #d8d8db;
    }

    .large {
        width: 100%;
    }

    .pass-retrieve-box {
        width: 100%;
        margin-top: px2rem(10);

        .phone-code-box {
            display: flex;
            align-items: center;
            justify-content: center;

            .code-size {
                width: 55%;
            }

            .code-btn {
                width: 40%;
                margin: px2rem(12) 0 px2rem(12) auto;
                background-color: #02bfff;
                border-radius: px2rem(4);
                box-sizing: border-box;
                height: px2rem(60);
                line-height: px2rem(60);
                text-align: center;
                color: #000304;
                letter-spacing: 1px;
                font-size: px2rem(24);
            }
        }

        .password-input-box {
            position: relative;
            width: 100%;

            .password-eye {
                position: absolute;
                width: px2rem(32);
                height: px2rem(32);
                top: px2rem(24);
                left: px2rem(382);
            }

            .bi-eye,
            .bi-eye-close {
                width: px2rem(32);
                height: px2rem(32);
            }
        }

        .password-confirm-input-box {
            position: relative;
            width: 100%;

            .password-confirm-eye {
                position: absolute;
                width: px2rem(32);
                height: px2rem(32);
                top: px2rem(24);
                left: px2rem(382);
            }

            .bi-eye,
            .bi-eye-close {
                width: px2rem(32);
                height: px2rem(32);
            }
        }
    }

    .large-btn {
        width: 100%;
        background-color: #02bfff;
        border-radius: px2rem(4);
        box-sizing: border-box;
        height: px2rem(65);
        line-height: px2rem(65);
        text-align: center;
        color: #000304;
        letter-spacing: 1px;
        font-size: px2rem(26);
    }

    .retrieve-margin {
        margin: px2rem(30) auto;
    }

    .pass-retrieve-tips {
        color: #d8d8db;
        font-size: px2rem(20);
        text-align: left;
    }
}
